<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:200px;border:solid 1px black;margin: 20px auto;font-size: 80px;line-height:200px;text-align: center;}
        #btn{display: block;margin: 0 auto;width: 100px;height:40px;font-size: 20px;}
    </style>
</head>
<body>
    <div class="box">3</div>
    <input type="button" id="btn" value="开始">
</body>
<script>
    // 1. 选择器
    var box = document.querySelector(".box");
    var btn = document.getElementById("btn");

    // 2. 准备记录倒计时的状态：0为停止，1为开始，2为终点
    var state = 0;

    // 3. 提前获取初始值以备复位使用
    var num = box.innerHTML;

    var t;

    // 单按钮倒计时的结构
    // btn.onclick = function(){
    //     if(state === 0){
    //         console.log("开始");
    //         state = 1;
    //     }else if(state === 1){
    //         console.log("停止");
    //         state = 0;
    //     }else{
    //         console.log("复位");
    //         state = 0;
    //     }
    // }


    btn.onclick = function(){
        // 4. 判断状态，如果是停止，点击时应该执行开始功能
        if(state === 0){
            // 开始功能：
            // 开启计时器之前先清除计时器
            clearInterval(t);
            // 开启计时器
            t = setInterval(function(){
                // 判断是否到终点
                if(box.innerHTML == 1){
                    // 清除计时器
                    clearInterval(t);
                    // 设置为0
                    box.innerHTML = 0;
                    // 修改为终点的状态
                    state = 2;
                    // 按钮修改为下次的功能描述
                    btn.value = "复位";
                }else{
                    // 正常倒计时
                    box.innerHTML--;
                }
            }, 1000);
            // 修改为开始的状态
            state = 1;
            // 按钮修改为下次的功能描述
            btn.value = "暂停";
        }else
        // 5. 判断状态，如果是开始状态，点击时应该执行暂停功能
        if(state === 1){
            // 清除计时器
            clearInterval(t);
            // 修改为停止的状态
            state = 0;
            // 按钮修改为下次的功能描述
            btn.value = "继续";
        }else
        // 6. 判断状态，如果是终点状态，点击时应该执行复位功能
        if(state === 2){
            // 设置初始值
            box.innerHTML = num;
            // 修改为开始状态
            state = 0;
            // 按钮修改为下次的功能描述
            btn.value = "开始";
        }
    }

    
</script>
</html>